<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="title">hello world</h1>
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
    <script>
       //getElementById和getElementsByClassName用的不多，只做了解
        // getElementById返回值是一个dom节点
        // let h1 = document.getElementById("title");
        // h1.innerHTML = "你好世界";
        // console.log(h1.innerHTML);
        //getElementsByClassName返回值是一个dom节点的集合。
        // let btns = document.getElementsByClassName("btn");
        // // btns.innerHTML = "test"
        // for(let i in btns){
        //     btns[i].innerHTML = "test";
        // }

        // let h1 = document.querySelector("#title");
        // h1.innerHTML = "你好世界";
            
        let btns = document.querySelectorAll(".btn");
        for(let i in btns){
            btns[i].innerHTML = "test";
        }
    </script>
</body>
</html>